<template>
  <div class="node-node">
    <div class="svg-wrap">
      <svg-icon :icon-class="iconCls"></svg-icon>
    </div>
    <div
      class="node-comp"
      :class="{ cls1: data.nodeState == 0, cls2: data.nodeState == 1, cls3: data.nodeState == 2, cls4: data.nodeState == 3, cls5: data.nodeState == 4 }"
    >
      <span>{{data.nodeRemark}}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    iconCls() {
      if (this.data.nodeState == 0) {
        return "completed";
      }
      if (this.data.nodeState == 1) {
        return "incomplete";
      }
      if (this.data.nodeState == 2) {
        return "stop";
      }
      if (this.data.nodeState == 3) {
        return "failed";
      }
      if (this.data.nodeState == 4) {
        return "running";
      }
      return 'incomplete'
    }
  }
};
</script>
<style lang="less" scoped>
@keyframes move {
  0% {
    left: 0;
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
@keyframes move1 {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.node-node{
  display: flex;
  height: 18px;
}
.svg-wrap{
  width: 11px;
  height: 11px;
  margin-right: 10px;
  position: relative;
  top: 3px;
}
.node-comp {
  display: inline-block;
  vertical-align: middle;
  line-height: 16px;
  font-size: 10.75px;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 18px;
  border: 1px solid rgb(135, 135, 135);
  background: rgba(135, 135, 135, 0.5);
  color: #fff;
  position: relative;
  span {
    position: relative;
    top: -1px;
  }
  &.cls1 {
    border: 1px solid rgb(50, 216, 140);
    background: rgba(50, 216, 140, 0.5);
  }
  &.cls2 {
    border: 1px solid rgb(119, 135, 163);
    background: rgba(119, 135, 163, 0.5);
  }
  &.cls3 {
    border: 1px solid rgb(71, 230, 251);
    background: rgba(71, 230, 251, 0.5);
  }
  &.cls4 {
    border: 1px solid rgb(2255, 66, 42);
    background: rgba(255, 66, 42, 0.5);
  }
  &.cls5 {
    border: 1px solid rgb(242, 191, 69);
    background: rgba(242, 191, 69, 0.5);
    &::after {
      position: absolute;
      left: 0;
      top: 0;
      width: 15px;
      height: 100%;
      content: "";
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      animation: move ease 1.5s infinite;
    }
  }
}
</style>